<template>
	<view>
		<u-tabs :list="list1" @click="changeTabs" lineColor='#FBE43F'
			:inactiveStyle="{ fontSize: '32rpx', transform: 'scale(1)',color: '#979797'  }"
			:activeStyle="{ color: '#000000',fontSize: '40rpx', }">
		</u-tabs>
		<scroll-view @scrolltolower="handleScrollToLower" class="page" scroll-y :lower-threshold="300">
			<view v-if="CurrentTabs == 0">
				<Article :tabList="tabList" :isMy='true' :isopen="false"></Article>
			</view>
			<view v-if="CurrentTabs == 1">
				<view class="roast" v-for="(item,index) in tabList" :key="index" @click="goDetail(item)">

					<view class="userinfo dis jcsb aic">
						<view class="dis aic">
							<view class="aravat">
								<image style="width: 100%;" :src="item.avatar ? item.avatar : '/static/icon/icon04.png'"
									mode="widthFix"></image>
							</view>
							<view class="">
								<view class="dis jss aic">
									<view class="username">{{item.nickName}}</view>
								</view>
								<view class="dis jss aic time">
									<view>{{item.createTime | monthDay }}</view>
									<view>{{item.createTime | hourMinute  }}</view>
								</view>
							</view>
						</view>
						<More></More>
					</view>
					<view class="centent">
						<text class="text">{{item.orderContent}}</text>
					</view>
					<view class="detail dis aic jcsb">
						<view class="price_lable">
							佣金
							<text class="price">￥{{item.amount}}</text>
						</view>
						<view class="state">
							<view class="bg">

							</view>
							<view class="text">
								{{item.orderStatus == 1 ? '未支付' :  item.orderStatus == 2 ? '待接单' : item.orderStatus == 3 ? '进行中' : item.orderStatus == 4 ? '已完成' : item.orderStatus == 5 ? '确认完成' : item.orderStatus == 6 ? '已取消' : ''}}
							</view>

						</view>

					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Article from '@/compontents/Article.vue'
	import {
		discussionMylList,
		getHelpOrderList
	} from '@/api.js'
	export default {
		components: {
			Article,
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				total: 0,
				list1: [{
						name: '帖子动态',
					},
					{
						name: '跑腿',
					},
				],
				CurrentTabs: 0,
				tabList: []
			}
		},
		filters: {
			// 提取月份和日期
			monthDay(value) {
				if (!value) return ''
				const datePart = value.split(' ')[0] || ''
				return datePart.substr(5)
			},

			// 提取时分并转换格式
			hourMinute(value) {
				if (!value) return ''
				const timePart = value.split(' ')[1] || ''
				return timePart.replace(/:\d+$/, '').replace(':', '.')
			}
		},
		onLoad() {
			uni.$on('refreshData', (data) => {
				this.tabList = []
				this.pageNo = 1
				this.pageSize = 10
				this.init(); // 刷新数据方法
			});
			this.init();
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/index/orderDetail?id=' + item.id
				})
			},
			handleScrollToLower() {
				let pageNo = this.pageNo
				let pageSize = this.pageSize
				let total = this.total
				console.log('一共' + total + '条，当前已经加载' + pageSize * pageNo + '条');
				if (total <= pageNo * pageSize) {
					console.log('已经到底了');
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.pageNo++;
				this.getList();
				uni.hideLoading();
			},
			changeTabs(e) {
				this.CurrentTabs = e.index
				this.pageNo = 1
				this.pageSize = 10
				this.total = 0
				this.tabList = []
				this.getList()
			},
			init() {
				this.getList()
			},
			async getList() {
				if (this.CurrentTabs == 0) {
					// 帖子
					let res = await discussionMylList({
						pageNo: this.pageNo,
						pageSize: this.pageSize
					})
					this.tabList = this.tabList.concat(res.result.records)
					this.total = res.result.total
				} else if (this.CurrentTabs == 1) {
					// 跑腿
					let res = await getHelpOrderList({
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						type: 2
					})
					this.tabList = this.tabList.concat(res.result.records)
					this.total = res.result.total

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 750rpx;
		height: calc(100vh - 100rpx);
	}

	.roast {
		padding: 30rpx;
		box-sizing: border-box;

		.userinfo {
			.aravat {
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				overflow: hidden;
				margin-right: 15rpx;
			}

			.live {
				width: 50rpx;
			}

			.more {
				width: 48rpx;
				height: 48rpx;
			}

			.username {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #858585;
				margin-top: 2rpx;

				view {
					margin-right: 10rpx;
				}
			}
		}

		.centent {
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #000000;
			}
		}

		.detail {
			margin-top: 10rpx;

			.price_lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #F36F38;
			}

			.price {
				font-size: 36rpx;
			}

			.state {
				position: relative;
				width: 120rpx;
				height: 50rpx;

				.text {
					position: absolute;
					top: 0;
					left: 20rpx;
				}

				.bg {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 123rpx;
					height: 24rpx;
					background: rgba(184, 255, 227, 0.6);
					border-radius: 19rpx 0rpx 0rpx 19rpx;
				}
			}

		}
	}
</style>